<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" @submit.native.prevent>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="listQuery.sdate"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="this.getList">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div id="yxkj-echarts">
      <product-chart :dataJsonName="dataJsonName" :dataJson="dataJson" />
    </div>
    <el-divider content-position="left"><legend class="divider-line">说明</legend></el-divider>
    <div class="tips">
      <p>浏览量统计展示网店在一段时间内的访客浏览商品的数据(PV)； 月份为单位，分别进行查询 。</p>
      <p>如果不选择日期，默认统计当前月份的数据。</p>
    </div>
  </div>
</template>
<script>
import { productDateNameList, productStatisticsList } from "@/api/report";
import ProductChart from '@/components/Charts/ProductChart'
export default {
  name: 'pvStatistics',
  components: { ProductChart },
  data() {
    return {
      optStateValues: [],
      listQuery: {
        sdate: '',
        sellerId: ""
      },
      dataJsonName: [],
      dataJson: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let params = {yxkjData: this.listQuery.sdate},
          params1 = {yxkjTime: this.listQuery.sdate}
      productDateNameList(params).then(res => {
        this.dataJsonName = [...res.data.data]
      })
      productStatisticsList(params1).then(res => {
        this.dataJson = [...res.data.data]
      })
    },
    reset() {
      this.listQuery.sdate = '';
      this.getList();
    },
  }
}
</script>
<style lang="scss" scoped>
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
.tips {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
  p {
    font-size: 14px;
    color: #5e6d82;
    line-height: 0.5em;
  }
}
</style>
